@charset "UTF-8";

*{
  margin: 0 0;
  padding: 0 0;
}
img{
  max-width: 100%;
}
ul{
  padding-left: 0;
  list-style: none;
}
a:link,a:visited{text-decoration:none;}
a:hover,a:active{text-decoration:underline;}

/*设置字体大小自适应*/
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.2rem;/*1.4 × 10px = 14px */}
body,input{
  line-height: 1.8;
  overflow-x: hidden;
  color: rgba(255, 255, 255, 0.8);
  font-family: Blizzard, Arial, Helvetica, "Segoe UI Symbol", "Segoe MDL2 Assets", "Microsoft YaHei", "Hei SC", "Segoe UI Symbol", "Segoe MDL2 Assets", sans-serif;
}
.wrap{
  width: 1190px;
  margin: 0 auto;
}
body:after {
  display: block;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
  content: 'Pc';
}
.wrap:before,.wrap:after{
  display: table;
  clear: both;
  content: '';
}
.wrap1:before,.wrap1:after{
  display: table;
  clear: both;
  content: '';
}
.wrap1{
  width:1366px;
  height: 100%;
  margin-left:auto;
  margin-right:auto;
}
a{
  color:black;
  text-decoration: none;
  &:hover{
    color:black;
    text-decoration: none;
  }
}
div{
  display: block;
}
.clearFix:before,.clearFix:after{
  height: 0;
  width: 0;
  overflow: hidden;
  clear: both;
  content: '';
  display: block;
}
/***********************************以下是首页部分***********************************************/
body{
 //background: url("../img/hearthstone.netease.jpg")repeat-y center 0;
}
#nav-client-header{
  width: 100%;
  height: auto;
  background: #2C0903;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  .nav-header-content{
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 40px;
    padding-left: 40px;
    height: 44px;
    .nav-header-left{
      display: block;
      float: left;
      width: auto;
      height: 100%;
      li{
        display: block;
        width: auto;
        height: 100%;
        float: left;
      }
      .nav-left-logo{
        a{
          display: block;
          width: 40px;
          height: 100%;
          background: url("../img/Flogo-bnet.png")no-repeat 0 0;
          background-position: -5px -3px;
          &:hover{
            background-position:-5px -53px;
          }
        }
      }
      .nav-left-game>div{
        display: block;
        width: 34px;
        height: 18px;
        font-size: 17px;
        padding: 10px 23px 13px 20px;
        cursor: pointer;
        position: relative;
        >a{
          color: white;
          text-decoration: none;
          position: relative;
          i{
            display: block;
            right: -23px;
            top: 0px;
            position: absolute;
            width: 16px;
            height: 16px;
            background: url("../img/Fsprite-16-white.png")no-repeat;
            background-position: -64px -256px;
            opacity: 0.5;
          }
        }
        div{
          display: none;
          width: 360px;
          height: 240px;
          border: 1px solid #000000;
          background-color:  #272e3b;
          position: absolute;
          top:45px;
          left: 0;
          box-shadow: 0 0 0 1px #3d434f inset, 0 5px 10px rgba(0, 0, 0, 0.75);
          box-sizing: border-box;
          min-width: 160px;
          z-index: 1;
          a{
            display: block;
            width: 33.3333333%;
            border:1px solid  #3d434f;
            border-left:none;
            border-top:none;
            box-sizing: border-box;
            font-size: 12px;
            padding-top: 70px;
            text-align: center;
            height: 120px;
            color:rgba(255, 255, 255, 0.7);
            text-decoration: none;
            position: relative;
            float: left;
            &:hover{
              background: rgba(255, 255, 255, 0.05);
              transition: background-color 0.2s ease 0s, border-color 0.2s ease 0s, color 0.2s ease 0s;
            }
            i{
              display: block;
              width: 70px;
              height: 70px;
              position: absolute;
              left: 50%;
              top: 5px;
              margin-left: -35px;
              background: url("../img/Fgame-icons-70.png")no-repeat 0 0;
              background-position: -2px -0;
              z-index: 9;
            }
          }
        }
      }
      .nav-left-store{
        display: block;
        width: 34px;
        height: 18px;
        font-size: 17px;
        padding: 10px 23px 13px 20px;
        cursor: pointer;
        position: relative;
        a{
          color:rgba(255, 255, 255, 0.7);
          text-decoration: none;
          transition: background-color 0.2s ease 0s, border-color 0.2s ease 0s, color 0.2s ease 0s;
          &:hover{
            color: whitesmoke;
          }
        }
      }
    }
    .nav-header-right{
      display: block;
      float: right;
      width: auto;
      height: 100%;
      li{
        display: block;
        width: auto;
        height: 100%;
        float: left;
      }
      li:first-child{
        display: block;
        width: 34px;
        height: 18px;
        font-size: 15px;
        padding: 10px 23px 13px 20px;
        cursor: pointer;
        position: relative;
        a{
          color:rgba(255, 255, 255, 0.7);
          text-decoration: none;
          transition: background-color 0.2s ease 0s, border-color 0.2s ease 0s, color 0.2s ease 0s;
          &:hover{
            color: whitesmoke;
          }
        }
      }
      li:last-child>div{
        display: block;
        width: auto;
        height: 22px;
        font-size: 15px;
        padding: 10px 23px 13px 20px;
        cursor: pointer;
        position: relative;
        >a{
          display: block;
          width: 100%;
          height: 100%;
          color:rgba(255, 255, 255, 0.7);
          text-decoration: none;
          position: relative;
          &:hover{
            color: whitesmoke;
          }
          i{
            display: block;
            right: -23px;
            top: 5px;
            position: absolute;
            width: 16px;
            height: 16px;
            background: url("../img/Fsprite-16-white.png")no-repeat;
            background-position: -64px -256px;
            opacity: 0.5;
          }
        }
        .user-onload{
          display: none;
          position: absolute;
          top: 46px;
          right: 0;
          min-width: 160px;
          height: auto;
          border: 1px solid #000000;
          background-color:#272e3b;
          box-sizing: border-box;
          box-shadow: 0 0 0 1px #3d434f inset, 0 5px 10px rgba(0, 0, 0, 0.75);
        }
        .arrow-top{
            display: block;
            width: 0;
            height: 0;
            z-index: 0;
            color:#321D14;
            position: absolute;
            top: -8px;
            right: 20px;
            border-top-width: 0;
            border-bottom:8px solid #3d434f;
          }
        .arrow-top:after{
            top: 1px;
            margin-left: -7px;
            border-width: 7px;
            border-style: solid;
            border-top-width: 0;
            border-bottom-color: #272e3b;
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            content: "";
            z-index: 1;
          }
        .user-profile{
          display: block;
          min-width: 200px;
          height: auto;
          .dropdown-section{
            border-bottom: 1px solid #3d434f;
            box-sizing: border-box;
            display: block;
            padding-bottom: 6px;
            padding-top: 6px;
          }
          .hidden{
            display: none;
            border: none;
          }
          .nav-box{
            display: block;
            width: auto;
            height: auto;
            padding:9px 15px;
            a{
              display: block;
              width: auto;
              height: auto;
              border-radius: 2px;
              background: #098cc8;
              box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
              text-decoration: none;
              color: white;
              padding: 3px 10px;
              text-align: center;
              cursor: pointer;
              &:hover{
                background:linear-gradient(to top, #0f9ada, #31b0d5);
              }
            }
          }
          .nav-list{
            display: block;
            width: auto;
            height: auto;
            position: relative;
            li{
              display: block;
              width: 100%;
              height: 30px;
              position: relative;
              padding: 0;
              transition: background 0.2s ease 0s ;
              font-size:15px !important;
              &:hover{
                background-color: #353C48;
              }
              a{
                padding: 0 10px;
                width: auto;
                display: block;
              }
              .nav-icon-character-cog{
                display: block;
                float: left;
                width: 24px;
                height: 24px;
                margin: 3px 8px 0 2px;
                background:url("../img/sprite-24-blue.png")no-repeat;
                background-position: -96px -122px;
              }
            }
          }
        }
      }
    }

  }
}
#fler{
  display: block;
  width: 100%;
  height: auto;
  background: url("../img/main-bg-top.jpg")no-repeat 50% 0 fixed;
}
#content-bot{
  display: block;
  width: 100%;
  height: auto;
  background: url("../img/Fmain-bg-bot.png")no-repeat 50% 100%;
  position: relative;
  z-index: 2;
  #headerFlash{
    width: 2000px;
    height: 224px;
    position: fixed;
    left: 50%;
    margin-left: -1001px;
    z-index: -99;
    top: 45px;
    source{
      z-index: -1;
    }
  }
  .video-mask{
    display: block;
    position: fixed;
    width: 2000px;
    height: 98px;
    left: 50%;
    margin-left: -1001px;
    top: 181px;
    background: url("../img/Fmask-bg-top.png")no-repeat 50% 0;
  }
  #header{
    display: block;
    width: 1024px;
    height: 277px;
    position: relative;
    left: 50%;
    margin-left: -512px;
    z-index: 99;
    .logo{
      display: block;
      position: absolute;
      width: 350px;
      height: 184px;
      top: 5px;
      left: 10px;
      background: url(../img/logo2.png) no-repeat 50% 0;
      background-position: 0px -40px;
      background-size: 100% 172%;
    }
    .search-box{
      display: block;
      border: 1px solid rgba(76,38,23,.5);
      box-sizing: border-box;
      height: 42px;
      position: absolute;
      right: 21px;
      top: 147px;
      width: 304px;
      color: white;
      input{
        display: block;
        width: 250px;
        height: auto;
        padding: 7px 40px 7px 10px;
        background: url(http://hearthstone.nos.netease.com/3/common/search-pix.png) repeat 0 0;
        border: 1px solid #eabf8b;
        outline: none;
        color: #fff;
        font-size: 14px;
      }
      a{
        display: block;
        width: 24px;
        height: 24px;
        margin: 10px;
        position: absolute;
        right: 0;
        top: 0;
        background: url("../img/Fsearch.png");
      }
    }
    .nav-header{
      display: block;
      position: absolute;
      width: 100%;
      height: 52px;
      top: 225px;
    }
    .nav-headerChange{
      display: block;
      position: fixed;
      width: 1024px;
      height: 52px;
      top: 0;
    }
    #nav{
      display: block;
      width: auto;
      padding-left: 58px;
      height: 100%;
      position: relative;
      background: url("../img/2Flayout2Fnav_bg-1.jpg")no-repeat 0 0;
     >li{
       display: block;
       width: 114px;
       height: 52px;
       float: left;
       background: url("../img/2Flayout2Fnav_bg-1.jpg") 0 0;
       cursor:pointer;
       &:first-child{
         position: absolute;
         left: -19px;
         top: -2px;
         width: 77px;
         height: 103px;
         background: url("../img/L-Fnav-sprite-l.png")no-repeat;
         cursor: default;
       }
       &:last-child{
         position: absolute;
         right: -32px;
         top: -3px;
         width: 77px;
         height: 103px;
         background: url("../img/R-Fnav-sprite-r.png")no-repeat;
         cursor:default;
       }
       ul{
         display: none;
         width: 114px;
         height: auto;
         position: absolute;
         top: 46px;
         background: rgba(84,18,15,.95);
         li{
           display: block;
           height: 34px;
           line-height: 34px;
           width: auto;
           font-size: 14px;
           a{
             display: block;
             padding-left:20px;
             width: auto;
             height: 100%;
             color: #cd998e;
             text-decoration: none;
             &:hover{
               color: #fff;
               background: #81120c;
             }
           }
         }
       }
       &:hover ul{
         display: block;
       }
     }
      .navbar1{
        background-position: -58px -52px;
        &:hover{
          background-position: -58px -52px;
        }
      }
      .navbar2{
        background-position:-171px 0;
        &:hover{
          background-position: -171px -52px;
        }
      }
      .navbar3{
        background-position:-285px 0;
        &:hover{
          background-position: -285px -52px;
        }
      }
      .navbar4{
        background-position:-399px 0;
        &:hover{
          background-position: -399px -52px;
        }
      }
      .navbar5{
        background-position:-513px 0;
        &:hover{
          background-position: -513px -52px;
        }
      }
      .navbar6{
        background-position:-627px 0;
        &:hover{
          background-position: -627px -52px;
        }
      }
      .navbar7{
        background-position:-741px 0;
        &:hover{
          background-position: -741px -52px;
        }
      }
      .navbar8{
        background-position:-856px 0;
        &:hover{
          background-position: -856px -52px;
        }
      }
    }
  }
}
/**************************************以下是中间部分css**************************************************/
#content{
  width: 1024px;
  position: relative;
  left: 50%;
  margin-left: -512px;
  min-height: 1000px;
  z-index: 2;
  padding-bottom: 100px;
  .homeCon{
    width: 1024px;
    margin: 0 auto;
    position: relative;
  }

  }
  .wraperConArea{
    width: 100%;
    padding-bottom: 41px;
    position: relative;
    background: url('../img/Fcon-bg-top.png') no-repeat 50% 0;
    .homeConMain{
      display: block;
      width: 703px;
      min-height: 1000px;
      position: relative;
      background: url("../img/2Fhomeconmain-bg.png")repeat-y 50% 0;
      z-index: 2;
      .homeConMain-top{
        display: block;
        padding-top: 27px;
        padding-bottom: 20px;
        width: 100%;
        background: url("../img/Fhomeconmain-bg-top.png")no-repeat 50% 0;
      }
      .slide{
        display: block;
        width: 640px;
        height: 296px;
        margin: 0 auto;
        padding: 1px;
        box-shadow: 1px 1px 1px #ffe4bb inset,-1px -1px 1px #ffe4bb inset;
        border: 1px solid #b7894c;
        position: relative;
      }
      .slide-content{
        position: relative;
        width: 640px;
        height: 296px;
       overflow: hidden;
        #slide-box{
          display: block;
          position: absolute;
          width: 400%;
          height: 100%;
          left: 0;
          transition: all ease .6s;
          li{
            display: block;
            width: 640px;
            height: 100%;
            float: left;
            a{
              display: block;
              width: 640px;
              height: 100%;
            }
          }
        }
      }
      .txtList{
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 42px;
        border-top: 1px solid #8a673b;
        background: url("../img/smallpoint.png")repeat;
        li{
          display: none;
          width: auto;
          height: 100%;
          padding-left: 10px;
          font-size: 18px;
          color: white;
          font-weight: 700;
          text-shadow: 0 0 2px #000;
          line-height: 42px;
        }
        .active{
           display: block;
         }
      }

      .eyebtn{
        display: block;
        width: 92px;
        height: 20px;
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 4;
        li{
          display: block;
          width: 25%;
          height: 20px;
          float: left;
          background: url("../img/Fnum-icon.png")no-repeat 0 0;
          background-position:0 0;
          cursor: pointer;
        }
        .eyebtn-hover{
          background-position:0 -30px;
        }
      }
      .videoEye{
        display: block;
        width: auto;
        margin: 0 20px;
        padding-top: 35px;
        padding-bottom: 7px;
        background: url("../img/Fnews-eyes-bg.jpg")no-repeat 50% 100%;
        li{
          float: left;
          width: 287px;
          height: 191px;
          padding: 10px;
          margin: 0 16px;
          background: url("../img/Fnews-eyes-module.png")no-repeat 50% 0;
          &:last-child{
            margin-left: 0;
          }
          a{
            display: block;
            width: 100%;
            height:auto;
            img{
              display: block;
              width: 284px;
              height: auto;
              margin: 2px;
            }
          }
          p{
            margin-top: 8px;
            width: 100%;
            height: 44px;
            line-height: 44px;
            font-size: 16px;
            text-align: center;
            font-weight: bolder;
            color: black;
          }
        }
      }
      .news-container{
        display: block;
        width: 630px;
        height: auto;
        margin: 0 auto;
        .news{
          display: block;
          width: 100%;
          height: auto;
          padding: 45px 10px 30px 0;
          border-bottom: 1px solid #dbc497;
          box-sizing: border-box;
          position: relative;
          >a{
            display: block;
            width: auto;
            height: 100px;
            padding-left: 222px;
            position: relative;
            img{
              display: block;
              width: 200px;
              height: 100px;
              padding: 2px;
              border: 1px solid #b7894c;
              position: absolute;
              left: 0;
              top: 0;
            }
            h4{
              font-size: 16px;
              font-weight: 700;
              padding-bottom: 10px;
            }
            p{
              font-size: 14px;
              color: #695745;
              overflow: hidden;
              letter-spacing: 1px;
            }
          }
          >p{
            display: block;
            position: absolute;
            height: 19px;
            bottom: 22px;
            left: 50%;
            margin-left: -100px;
            a{
              display: block;
              float: left;
              .heart{
                display: block;
                float: left;
                display: inline-block;
                height: 19px;
                width: 20px;
                background: url("../img/FcommonFicon.png")no-repeat;
                background-position: -80px -112px;
              }
              .attention{
                display: block;
                height: 19px;
                line-height: 19px;
                float: left;
                font-size: 15px;
                color: #d25300;
              }
            }
            >span{
              display: block;
              float: left;
              margin-left: 20px;
              height: 19px;
              color: #666;
            }
          }
          &:hover{
            background:url("../img/Fhomenewsbg.png")repeat-y;
          }
        }
      }
      .homeshowmore{
        display: block;
        width: 630px;
        height: auto;
        margin: 0 auto;
        padding-top: 20px;
        border-top: 1px solid #efdba8;
        a{
          display: block;
          width: 100%;
          height: 40px;
          border: 1px solid #f1dbb8;
          background-color: #d3b78b;
          border-radius: 4px;
          text-align: center;
          line-height: 40px;
          font-size: 16px;
          color:#5b4b38;
          position: relative;
          &:after{
            display: block;
            width: 0;
            height: 0;
            border-width: 5px 5px 0;
            border-color:#5b4b38 transparent transparent;
            border-style: solid;
            position: absolute;
            left: 50%;
            top: 18px;
            margin-left: 40px;
            content: '';
          }
          &:hover{
            background: #c3a473;
            transition: background,.2s ease 0s;
          }
        }
      }
      .homebottompage{
        display: block;
        width: 703px;
        height: 34px;
        margin: 0 auto;
        position: absolute;
        bottom: -22px;
        background: url("../img/Fhomeconmain-bg-bot.png")no-repeat 50% 0;
      }
    }
    .homeConBar{
      display: block;
      width: 340px;
      min-height: 1000px;
      position: absolute;
      top: 0;
      right: 0;
      background: url("../img/FhomeFhomeconbar-bg.png")repeat-y 50% 0;
      z-index: 1;
      .homeconbarTop{
        display: block;
        width: 328px;
        height: 155px;
        padding: 595px 0 10px;
        background: url("../img/112Fhome-bg.jpg")no-repeat 0 0;
        position: relative;
        >a{
          display: block;
          position: absolute;
          width: 294px;
          height: 233px;
          top: -23px;
          left: 16px;
          z-index: 5;
          background: url("../img/logo1.png")no-repeat;
          background-size: 100% 100%;
        }
        .downloadControll{
          display: block;
          width: 240px;
          height: 85px;
          position: absolute;
          top: 230px;
          left: 50%;
          margin-left: -112px;
          >span{
            display: block;
            position: relative;
            float: left;
            width: 80px;
            height: 90px;
            background-image: url("../img/2Fdevice-icon.png");
          }
          .firstdownloadbtn{
            background-position: 0 0;
            &:hover{
              background-position-y:-89px;
            }
          }
          .seconddownloadbtn{
            background-position: -80px 0;
            &:hover{
              background-position-y:-89px;
            }
          }
          .thirddownloadbtn{
            background-position: -160px 0;
            &:hover{
              background-position-y:-89px;
            }
          }
          .BtnChange{
            -ms-background-position-y: -182px;
            background-position-y: -182px!important;
          }
          a{
            display: block;
            position: absolute;
            width: 220px;
            height: 61px;
            bottom: -85px;
            left: 50%;
            margin-left: -110px;
            z-index: 10;
          }
          video{
            display: block;
            position: absolute;
            width: 220px;
            height: 61px;
            bottom: -85px;
            left: 50%;
            margin-left: -110px;
            z-index: 7;
          }
          .downloadmask{
            display: block;
            position: absolute;
            width: 220px;
            height: 61px;
            bottom: -85px;
            left: 50%;
            background: url("../img/download-btn2.png")no-repeat;
            background-position: -37px -371px;
            margin-left: -110px;
            z-index: 6;
          }
        }
        .slide-right-download{
          width: 240px;
          height: 155px;
          margin: 0 auto;
          position: relative;
          >div{
            width: 240px;
            height: 155px;
            position: relative;
            overflow: hidden;
          }
          #imgBoxSilder{
            display: block;
            width: 300%;
            height: 100%;
            position: absolute;
            left: 0;
            li{
              display: block;
              float: left;
              width: 240px;
              height: 155px;
              a{
                display: block;
                width: 240px;
                height: 155px;
                position: relative;
                span{
                  display: block;
                  width: 240px;
                  height: 124px;
                  position: absolute;
                  img{
                    transition: transform 300ms;
                  }
                }
                .back1{
                  z-index: 2;
                }
                .back2{
                  z-index: 9;
                }
                p{
                  display: block;
                  width: 240px;
                  height: 21px;
                  position: absolute;
                  bottom: 0;
                  text-align: center;
                  font-size: 16px;
                  font-weight: 700;
                }
              }
            }
            .back1:after{
              position: absolute;
              content: '';
              z-index: 2;
              top: 2px;
              right: 2px;
              bottom: 2px;
              left: 2px;
              background-color: rgba(0,0,0,.99);
              opacity: 0;
              transition: opacity 300ms linear;
              border-radius: 8px;
            }
            li:hover .back2>img{
              transform: scale(1.1);
              transition: transform 300ms;
            }
            li:hover .back1:after{
              position: absolute;
              content: '';
              z-index: 2;
              top: 2px;
              right: 2px;
              bottom: 2px;
              left: 2px;
              background-color: rgba(0,0,0,.99);
              opacity: .3;
              transition: opacity 300ms linear;
              border-radius: 8px;
            }
          }
        }
        .left-nav-btn{
          display: block;
          width: 7px;
          height: 14px;
          position: absolute;
          left: -20px;
          bottom: 85px;
          background: url("../img/32Fhome2Fesport-icon.gif")no-repeat 0 0;
          cursor: pointer;
        }
        .right-nav-btn{
          display: block;
          width: 7px;
          height: 14px;
          position: absolute;
          right: -20px;
          bottom: 85px;
          background: url("../img/32Fhome2Fesport-icon.gif")no-repeat -8px 0;
          cursor: pointer;
        }
      }
      .dragWrapper{
        display: block;
        width: 305px;
        height: auto;
        margin: 0 auto;
        position: relative;
        .module_media{
          .top{
            background: url("../img/Fmoudel-top-bg.jpg")no-repeat 0 0;
          }
          .bot{
            display: block;
            width: auto;
            padding: 30px 20px;
            h1{
              font-size: 16px;
              color:#03345f;
              span{
                display: block;
                float: left;
                width: 30px;
                height: 30px;
                margin-right: 5px;
                background: url("../img/FcommonFicon.png")no-repeat;
              }
            }
            .video-box{
              margin: 10px auto;
              width: 265px;
              height: 117px;
              position: relative;
              overflow: hidden;
              box-shadow: 0 0 1px #000;
              a{
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                content: '';
                z-index: 9;
              }
              .over{
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                content: '';
                box-shadow: 0 0 15px #000 inset;
              }
            }
            .module_news{
              margin: 5px auto;
              position: relative;
              li{
                position: relative;
                border-bottom: 1px solid #e8d6a8;
                a{
                  display: block;
                  width: auto;
                  color: #5b4b38;
                  font-size: 12px;
                  padding: 5px 0;
                  span{
                    display: block;
                    float: left;
                    margin-top: 5px;
                    content: '';
                    width: 0;
                    height: 0;
                    position: relative;
                    border-width: 4px;
                    border-color: transparent transparent transparent black;
                    border-style: solid;
                  }
                }
                .date{
                  display: block;
                  position: absolute;
                  top: 5px;
                  right: 0;
                  color: #5b4b38;
                }
                &:hover a{
                  color:#db6800;
                  span{
                    border-color: transparent transparent transparent #db6800;
                  }
                }
              }
              .more{
                display: block;
               width: 33px;
                height: 20px;

                position: absolute;
                bottom: -22px;
                right: 10px;
                background: url("../img/2Fv20152Flayout2Ficon-more.png")no-repeat center;
              }
            }
          }

          &:hover{
            .top{background: url("../img/Fmoudel-hover-top-bg.jpg")no-repeat 0 0;}
            .mid{
              background: url("../img/2Fv2015Fhome2Fmoudel-hover-mid-bg.jpg")repeat-y 100% 0;
            }
            .bot{
             background: url("../img/2Fv20152Fhome2Fmoudel-hover-bot-bg.jpg")no-repeat 100% 100%;
            }
          }
        }
      }
      .rightModule-normal{
        display: block;
        width: 260px;
        height: auto;
        margin: 0 auto;
        .subModule{
          width: 100%;
          height: 52px;
          border:1px solid #efd4ad;
          background: #d1b181;
          border-radius: 3px;
          margin: 10px auto;
          position: relative;
          box-sizing: border-box;
          .text{
            position: absolute;
            top: 12px;
            left: 15px;
           h4{
             color: #251c0f;
             font-size: 15px;
           }
          }
          .text-s{
            position: absolute;
            top: 10px;
            left: 15px;
            font-weight: 700;
            p{
              color: #66563d;
              font-size: 14px;
              font-weight: 700;
              margin-top: -5px;
            }
          }
          a{
            display: block;
            position: absolute;
            width: 100%;
            height: 72px;
            top: -22px;
            left: 0;
            background: url("../img/2Fcommnity-icon (1).png")no-repeat;
            overflow: hidden;
          }
          .icon_1{
            top: -20px;
            background-position: 175px -272px;
          }
          .icon_2{
            background-position:175px -1120px;
          }
          .icon_3{
            background-position:175px -1515px;
          }
          .icon_4{
            background-position:175px -501px;
          }
          .icon_5{
            background-position:175px -763px;
          }
          .icon_6{
            background-position:178px -1009px;
          }
          .icon_7{
            background-position:175px -1340px;
          }
          &:hover{
            .icon_1{
              background-position: 175px -372px;
            }
            .icon_2{
              background-position:175px -1125px;
            }
            .icon_3{
              background-position:175px -1518px;
            }
            .icon_4{
              background-position:175px -603px;
            }
            .icon_5{
              background-position:175px -883px;
            }
            .icon_6{
              background-position:178px -1014px;
            }
            .icon_7{
              background-position:175px -1430px;
            }
          }
        }
        .change-sub{
          height: 72px;
          a{
            height: 92px;
          }
        }
      }
      .comm_share{
        width: 100%;
        height: auto;
        ul{
          display: block;
          width: 100%;
          height: auto;
          margin-top: 20px;
          li{
            display: block;
            float: left;
            width: 114px;
            height: 42px;
            margin: 0 10px 23px 0;
            padding-right: 8px;
            h3{
              color:#251c0f;
              font-size: 14px;
            }
            p{
              font-size: 12px;
              color:#251c0f;
            }
            a{
              display: block;
              width: 100%;
              height: auto;
              position: relative;
              line-height: 32px;
              font-size: 14px;
              span{
                width: 42px;
                height: 42px;
                display: block;
                float: left;
                background: url("../img/2Fv20152Flayou2Fshare.png")no-repeat;
              }
              .yixin{
                transition: all ease .3s;
                background-position:-290px 0;
              }
              .weixin{
                transition: all ease .3s;
                background-position:-375px 0;
              }
              .xinlang{
                transition: all ease .3s;
                background-position:-207px 0;
              }
              .lushi{
                transition: all ease .3s;
                background-position:-460px 0;
              }
              em{
                display: none;
                position: absolute;
                top: -112px;
                width: 92px;
                height: 92px;
                padding: 10px;
                background: rgba(19,17,17,.5);
                border-radius: 6px;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              p{
                margin-top: -6px;
              }
              &:hover{
                p{
                  color:red;
                }
              }
            }
            &:hover{
              .yixin{
                transition: all ease .3s;
                background-position: -290px -60px;
              }
              .weixin{
                transition: all ease .3s;
                background-position:-375px -60px;
              }
              .xinlang{
                transition: all ease .3s;
                background-position:-207px -60px;
              }
              .lushi{
                transition: all ease .3s;
                background-position:-460px -60px;
              }
              em{
                display:block ;
              }
            }
          }
        }
      }
      .homeCon-bottom{
        position: absolute;
        bottom: -35px;
        width: 100%;
        height: 35px;
        background: url("../img/2Fv20152FhomeFhomeconbar-bg-bot.png")no-repeat 50% 0;
      }
    }
}


/**************************************以上是中间部分css**************************************************/
#footer{
  display: block;
  height: 471px;
  background: url("../img/footer-bc.jpg")repeat-x;
  position: relative;
  .footer{
    width: 100%;
    height: 471px;
    display: block;
    background: url("../img/footer-bc2.jpg")no-repeat 50% 0;
    background-size:auto auto;
    .footer-top{
      width: 100%;
      height: auto;
      display: block;
      margin: 70px 0 70px;
      color: white;
      font-size: 14px;
      .regWrapper{
        display: block;
        width: 349px;
        height: 87px;
        position: absolute;
        top: -30px;
        left: 50%;
        margin-left: -175px;
        background: url("../img/2Fv20152Flayout2Freg-bg.png")no-repeat center;
        z-index: 999;
        a{
          width: 249px;
          height: 83px;
          display: block;
          margin: 10px auto 0;
          background: url("../img/32Fv20152Flayout2Freg-btn.png")no-repeat;
          background-position: 0 0;
        }
        &:hover{
          a{
            background-position: 0 -84px;
          }
        }
      }
      .footer-top-left{
        display: block;
        width: 45%;
        float: left;
        padding-left: 5%;
        a{
          display: block;
          height: auto;
          width: auto;
          float: left;
          margin: 10px 20px;
          span{
            width: 25px;
            height: 25px;
            display: inline-block;
            float: left;
            background: url('../img/small-icon.png')no-repeat 0 0;
          }
          b{
            display: inline-block;
            float: left;
            position: relative;
            font-weight: normal;
            padding-left: 8px;
          }
        }
      }
      .footer-top-right{
        display:block;
        width: 40%;

        float: right;
        padding-left: 10%;
        margin-top: 13px;

        span,a{
          display: block;
          float: left;
          color: white;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          margin-bottom:20px;
        }
        .nvidia{
          width: 95px;
          height: 26px;
          display:block;
          margin: 0 20px 0 20px;
        }
        .mail,.icon-more{
          width: 14px;
          height: 14px;
          border: 1px solid rgb(45, 23, 2);
          background-color:rgb(36, 17, 1);
          margin:5px 10px 0 0;
          position: relative;
          .line-h{
            width: 70%;
            height: 2px;
            display: block;
            position: absolute;
            top: 45%;
            left: 15%;
            background: rgb(172, 119, 31);
          }
          .line-s{
            height: 60%;
            width: 2px;
            display: block;
            position: absolute;
            left: 45%;
            top: 20%;
            background: rgb(172, 119, 31);
          }
        }
        .mail:hover .line-h,.mail:hover .line-s{
          background: white;
        }
      }
      a{
        color: white;
        text-decoration: none;
      }
      .triangle{
        border: 4px solid transparent;
        border-top-color: #ac771f;
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -2px 0 0 -4px;
      }
      .icon-more:hover .triangle{
        border-top-color: white;
      }
    }
    .footer-bottom{
      margin-left: 7%;
      display: block;
      width: 93%;
      .footer-bottom-left{
        display: block;
        width: 40%;
        height: auto;
        float: left;
        .logo-z{
          display: block;
          float: left;
          width: 160px;
          height: 70px;
          background: url("../img/blizzard.png")no-repeat 0 0;
        }
        .logo-w{
          display: block;
          float: left;
          margin-top: 20px;
          width: 130px;
          height: 50px;
          background: url("../img/wangnet.png")no-repeat 0 0;
        }
      }
      .footer-bottom-right{
        display: block;
        width: 60%;
        height: auto;
        float: left;
        .API{
          display: block;
          width: 100%;
          height: auto;
          color: white;
          font-size: 14px;
          a{
            margin-right:10px;
            color: white;
            font-size: 14px;
            text-align: right;
          }
        }
      }
    }
  }
}


::selection {
  background: #db6800;
  color:whitesmoke;
}
input::-webkit-input-placeholder { color: white; }
input:-moz-placeholder { color:  white;}
input:-ms-input-placeholder { color: white;}
/*********************************************************************************************/
/*1280分辨率以上（大于1200px）*/
@media screen and (min-width:1200px){
  .body-container{
    padding: 0;
    .content{
      max-width: 550px;
      padding-top:0;
      padding-bottom: 30px;
      margin: 0 auto;
      .header{
        p{
          padding-top: 0;
          padding-bottom: 20px;
          margin: 0 20px;
          min-width: 280px;
        }
        .logo{
          width: 80%;
          max-width: 500px;
        }
        h1{
          font-size: 30px;
        }
      }
      form{
        padding-top: 0;
        padding-bottom: 30px;
        margin: 0 20px;
        min-width: 280px;
      }
    }
  }
  .footer-container{
    max-width: 1120px;
    margin: 150px auto 0;
    padding: 30px 40px ;
    .footer-top{
      .footer-nav{
        padding-left: 15px;
        width: auto;
      }
      a{
        font-size: 15px;
      }
    }
    .footer-bottom{
      .footer-left{
        display: block;
        margin: 0 auto;
        text-align: center;
        img{
          display: inline-block;
        }
      }
      .footer-right{
        padding-left: 30px;
        padding-right: 10px;
        a{
          font-size: 12px;
        }
      }
    }
  }
}
/*1100分辨率（大于960px，小于1199px）*/
@media screen and (min-width: 960px) and (max-width: 1199px) {
  .body-container{
    padding: 0;
    .content{
      max-width: 550px;
      padding-top:0;
      padding-bottom: 30px;
      margin: 0 auto;
      .header{
        p{
          padding-top: 0;
          padding-bottom: 20px;
          margin: 0 20px;
          min-width: 280px;
        }
        .logo{
          width: 80%;
          max-width: 500px;
        }
        h1{
          font-size: 30px;
        }
      }
      form{
        padding-top: 0;
        padding-bottom: 30px;
        margin: 0 20px;
        min-width: 280px;
      }
    }
  }
  .footer-container{
    max-width: 1120px;
    margin: 150px auto 0;
    padding: 30px 40px ;
    .footer-top{
      .footer-nav{
        padding-left: 15px;
        width: auto;
      }
      a{
        font-size: 15px;
      }
    }
    .footer-bottom{
      .footer-left{
        display: block;
        margin: 0 auto;
        text-align: center;
        img{
          display: inline-block;
        }
      }
      .footer-right{
        padding-left: 30px;
        padding-right: 10px;
        a{
          font-size: 12px;
        }
      }
    }
  }
}
/*880分辨率（大于768px，小于959px）*/
@media screen and (min-width: 768px) and (max-width: 959px) {
  .body-container{
    padding: 0;
    .content{
      max-width: 550px;
      padding-top:0;
      padding-bottom: 30px;
      margin: 0 auto;
      .header{
        p{
          padding-top: 0;
          padding-bottom: 20px;
          margin: 0 20px;
          min-width: 280px;
        }
        .logo{
          width: 80%;
          max-width: 500px;
        }
        h1{
          font-size: 30px;
        }
      }
      form{
        padding-top: 0;
        padding-bottom: 30px;
        margin: 0 20px;
        min-width: 280px;
      }
    }
  }
  .footer-container{
    width: 100%;
    padding: 0;
    .footer-top{
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      .footer-nav{
        padding-left: 15px;
        width: auto;
      }
      a{
        font-size: 13px;
      }
    }
    .footer-bottom{
      .footer-left{
        display: block;
        margin: 0 auto;
        float: none;
        text-align: center;
        img{
          display: inline-block;
        }
      }
      .footer-right{
        text-align: center;
        padding-left: 100px;
        padding-right: 100px;
        a{
          font-size: 12px;
        }
        ul{
          margin-left: 30%;
        }
      }
    }
  }
}
/*720分辨率（大于480px，小于767px）*/
@media only screen and (min-width: 480px) and (max-width: 767px){
  .body-container{
    padding: 0;
    .content{
      max-width: 550px;
      padding-top:0;
      padding-bottom: 30px;
      margin: 0 auto;
      .header{
        p{
          padding-top: 0;
          padding-bottom: 20px;
          margin: 0 20px;
          min-width: 280px;
        }
        .logo{
          width: 80%;
          max-width: 500px;
        }
        h1{
          font-size: 30px;
        }
      }
      form{
        padding-top: 0;
        padding-bottom: 30px;
        margin: 0 20px;
        min-width: 280px;
      }
    }
  }
  .footer-container{
    width: 100%;
    padding: 0;
    .footer-top{
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      .footer-nav{
        padding-left: 15px;
        width: auto;
      }
      a{
        font-size: 13px;
      }
    }
    .footer-bottom{
      .footer-left{
        display: block;
        margin: 0 auto;
        float: none;
        text-align: center;
        img{
          display: inline-block;
        }
      }
      .footer-right{
        text-align: center;
        padding-left: 100px;
        padding-right: 100px;
        a{
          font-size: 12px;
        }
        ul{
          margin-left: 30%;
        }
      }
    }
  }
}
/*440分辨率以下（小于479px）*/
@media only screen and (max-width: 479px) {
  .body-container{
    padding: 0 5px;
    .content{
      max-width: 500px;
      padding-top:0;
      padding-bottom: 30px;
      margin: 0 auto;
      .header{
        p{
          padding-top: 0;
          padding-bottom: 20px;
          margin: 0 20px;
          min-width: 280px;
        }
        .logo{
          width: 80%;
          max-width: 500px;
        }
        h1{
          font-size: 30px;
        }
      }
      form{
        padding-top: 0;
        padding-bottom: 30px;
        margin: 0 20px;
        min-width: 280px;
      }
    }
  }
  .footer-container{
    width: 100%;
    padding: 0;
    .footer-top{
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      .footer-nav{
        padding-left: 15px;
        width: auto;
      }
      a{
        font-size: 13px;
      }
    }
    .footer-bottom{
      .footer-left{
        display: block;
        margin: 0 auto;
        float: none;
        text-align: center;
        img{
          display: inline-block;
        }
      }
      .footer-right{
        text-align: center;
        padding-left: 40px;
        padding-right: 40px;
        a{
          font-size: 12px;
        }
      }
    }
  }
}